import QtQuick 2.0
import QtQuick.XmlListModel 2.0

Item {
    id: root;

    Rectangle {
        anchors.fill: parent;
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#4a4a4a"; }
            GradientStop { position: 1.0; color: "#2b2b2b"; }
        }
    }

    ListView {
        id: listView;
        width: 300;
        anchors.left: parent.left;
        anchors.top: parent.top;
        anchors.bottom: parent.bottom;
        clip: true;

        spacing: 2;

        model: imageModel;
        delegate: imageDelegate;
    }

    PathView {
        id: pathView;
        anchors.left: listView.right;
        anchors.top: parent.top;
        anchors.right: parent.right;
        anchors.bottom: parent.bottom;
        clip: true;

        delegate: imagePathDele;
        model: imageModel;

        path: Path {
            startX: 0;
            startY: pathView.height/2;

            PathAttribute { name: "itemZ"; value: 0; }
            PathAttribute { name: "itemAngle"; value: 90.0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
            PathLine { x: pathView.width*0.4; y: pathView.height/2; }
            PathPercent { value: 0.48; }
            PathLine { x: pathView.width*0.5; y: pathView.height/2; }
            PathAttribute { name: "itemZ"; value: 100; }
            PathAttribute { name: "itemAngle"; value: 0.0; }
            PathAttribute { name: "itemScale"; value: 1.0; }
            PathLine { x: pathView.width*0.6; y: pathView.height/2; }
            PathPercent { value: 0.52; }
            PathLine { x: pathView.width; y: pathView.height/2; }
            PathAttribute { name: "itemZ"; value: 0; }
            PathAttribute { name: "itemAngle"; value: -90.0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
        }

        //可见子项目的数量
        pathItemCount: 16;

        //当前项的显示区间
        preferredHighlightBegin: 0.5;
        preferredHighlightEnd: 0.5;

        focus: true;
        Keys.onLeftPressed: {
            decrementCurrentIndex();
        }
        Keys.onRightPressed: {
            incrementCurrentIndex();
        }
        Keys.onEnterPressed: {
            wapper.show();
        }
    }

    //路径视图代理
    Component {
        id: imagePathDele;

        ImageShow {
            id: wapper;
            width: 300;
            height: 240;

            visible: PathView.onPath;
            scale: PathView.itemScale;
            z: PathView.itemZ;

            text.text: title;
            image.source: imageSource;

            onClicked: {
                show();
            }

            function show() {
                if(index == pathView.currentIndex && wapper.state === "") {
                    wapper.state = "expanded";
                }
                else
                {
                    wapper.state = "";
                }
            }

            property variant rotAngle: PathView.itemAngle;

            transform: Rotation {
                axis { x: 0; y: 1; z: 0; }
                angle: wapper.rotAngle;
                origin { x: 32; y: 32; }
            }

            state: "";

            states: [
                State {
                    name: "expanded"
                    PropertyChanges { target: wapper; height: pathView.height;
                        width: pathView.width; rotAngle: 0.0; scale: 1.0;
                        z: 100; }
                    PropertyChanges { target: wapper.PathView.view;
                        interactive: false; }
                }
            ]

            transitions: [
                Transition {
                    NumberAnimation {
                        duration: 200;
                        properties: "height,width,rotAngle,scale,transform,z,interactive";
                    }
                }
            ]
        }
    }

    Component {
        id: imageDelegate;

        ImageShow {
            id: imageItem;

            text.text: title;
            image.source: imageSource;
        }
    }

    XmlListModel {
        id: imageModel;

        source: "http://feeds.nationalgeographic.com/ng/photography/photo-of-the-day/";
        query: "/rss/channel/item";

        XmlRole { name: "title"; query: "title/string()"; }
        XmlRole { name: "imageSource"; query: "substring-before(substring-after(description/string(), 'img src=\"'), '\"')" }

        onStatusChanged: {
            switch(imageModel.status)
            {
            case XmlListModel.Null:
                loadText.text = "null";
                break;
            case XmlListModel.Ready:
                loadText.text = "ready";
                break;
            case XmlListModel.Loading:
                loadText.text = "loading";
                break;
            case XmlListModel.Error:
                loadText.text = "error:" + imageModel.errorString();
                imageModel.reload();
                break;
            }
        }

        onProgressChanged: {
            if(imageModel.progress === 1)
            {
                loadText.visible = false;
            }
            else
            {
                loadText.text = imageModel.progress;
            }
        }
    }

    Text {
        id: loadText;
        anchors.top: parent.top;
        anchors.horizontalCenter: parent.horizontalCenter;

        font.pointSize: 16;
        color: "white";
    }
}
